// 封装一个函数 调用函数 就可以弹出消息提示

import { h, render } from 'vue'
import XtxMessage from './message.vue'
interface ParamsType {
  type: 'success' | 'error' | 'warning'
  text: string
  duration?: number
}

// 可以提前创建好一个盒子 用于消息提示组件的渲染

const div = document.createElement('div')
div.setAttribute('class', 'xtx-message-container')
document.body.appendChild(div)

function Message({ type, text, duration = 2000 }: ParamsType) {
  // 希望基于message.vue 组件对象动态创建一个虚拟节点, 插入页面展示
  //   <XtxMessage type="success" >登录成功</XtxMessage>
  const vNode = h(XtxMessage, { type: type, text: text })

  render(vNode, div)

  // 开启延时器
  setTimeout(() => {
    render(null, div)
  }, duration)
}

Message.success = function (text: string, duration: number = 2000) {
  Message({
    type: 'success',
    text: text,
    duration: duration,
  })
}

Message.error = function (text: string, duration: number = 2000) {
  Message({
    type: 'error',
    text: text,
    duration: duration,
  })
}

Message.warning = function (text: string, duration: number = 2000) {
  Message({
    type: 'warning',
    text: text,
    duration: duration,
  })
}

// message({type: 'success', text: '登录成功'})
// message({type: 'error', text: '登录失败'})
// message({type: 'warning', text: '有问题'})

export default Message
